<template>
    <div class="create">
        <div class="img-box">
            <img :src="createImgUrl" alt="">
        </div>
        <div class="button" @click="saveImage">保存图片</div>
        <div class="canvas-box">
            <canvas id="my-canvas" canvas-id="mycanvas"></canvas>
        </div>
    </div>
</template>

<script>
    import api from '@/api/api';
    export default {
        data() {
            return {
                createImgUrl: '',
                imgUrl: 'http://ovi8yxbuf.bkt.clouddn.com/create-image-bg.png'
            }
        },
        methods: {
            async createNewImg() {
                try {
                    var context = wx.createCanvasContext('mycanvas');
                    var path = "/images/canvas-bg.png";
                    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
                    //不知道是什么原因，手机环境能正常显示
                    context.drawImage(path, 0, 0, 750, 1200);
                    //context.draw(true);
                    //context.draw();
                    this.setMoney(context);
                    this.setName(context);
                    //绘制图片
                    context.draw();
                    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
                    setTimeout(() => {
                        wx.canvasToTempFilePath({
                            canvasId: 'mycanvas',
                            success: (res) => {
                                var tempFilePath = res.tempFilePath;
                                console.log(tempFilePath);
                                this.createImgUrl = tempFilePath;
                            }
                        });
                    }, 200);
                } catch (error) {
                    console.error(error);
                }
            },
            //将金额绘制到canvas的固定
            setMoney(context) {
                context.setFontSize(24);
                context.setFillStyle("#484a3d");
                context.fillText(520000, 340, 190);
                context.stroke();
            },
            //将姓名绘制到canvas的固定
            setName(context) {
                context.setFontSize(20);
                context.setFillStyle("#67695b");
                context.save();
                context.translate(170, 506); //必须先将旋转原点平移到文字位置
                context.rotate(-5 * Math.PI / 180);
                context.fillText('图片生成小助手', 0, 0); //必须为（0,0）原点
                context.restore();
                context.stroke();
            },
            async saveImage() {
                try {
                    let re = await api.wxp.saveImageToPhotosAlbum({
                        filePath: this.createImgUrl
                    })
                    console.log(re);
                } catch (error) {
                    console.error(error);
                }
            }
        },
        onLoad() {
            this.createNewImg();
        }

    }

</script>

<style lang="less" scoped>
    .canvas-box {
        position: fixed;
        left: 0;
        top: 999999999rpx;
    }

    #my-canvas {
        width: 750px;
        height: 1200px;
    }

    .create {
        height: 100%;
    }

    .img-box {
        background-color: blue;
        height: 100%;
        img {
            width: 750rpx;
            height: 100%;
            vertical-align: bottom;
        }
    }
    .button{
        position: fixed;
        left: 200rpx;
        top: 200rpx;
        font-size: 30rpx;
        padding: 5rpx 10rpx;
        border: 1rpx solid #000;
    }

</style>
<style lang="less">
    page {
        height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
    }

</style>
